<script setup>
import Header from '@/components/header/Header.vue'
import {requestTypeList} from "@/api/study/studyApi";
import {useRouter} from "vue-router";
import {requestHomeWorkList} from "@/api/home-work/homeWorkApi";

const data = ref([])

const typeList = ref([])
onMounted(() => {
  requestTypeList().then(value => {
    value.data.unshift({
      id: -1,
      name: '全部'
    })
    typeList.value = value.data
  })

  getCourseData()

})

const getCourseData = (type) => {
  requestHomeWorkList({type, size: -1}).then(res => {
    data.value = res.data
  })
}
/**
 * 变更tab
 */
const changeTab = (e) => {
  getCourseData(e)
}

const router = useRouter()
/**
 * 课程item
 */
const courseItemClick = (id) => {
  router.push(`/home-work/detail/${id}`)
}
</script>

<template>
  <Header :page="true"></Header>

  <div class="page-content">
    <n-tabs type="line" animated @update:value="changeTab" :default-value="-1">
      <n-tab-pane v-for="(item) in typeList" :name="item.id" :tab="item.name">
        <n-grid x-gap="12" :cols="4" class="grid">
          <n-gi class="course_item  hvr-bob" v-for="(item) in data" :key="item.id"
                @click="courseItemClick(item.id)">
            <div>
              <h3>{{ item.title }}</h3>
              <!--              <p>{{ item.content }}</p>-->
              <p>{{ item.createTime }}</p>
            </div>
          </n-gi>
        </n-grid>
      </n-tab-pane>

    </n-tabs>


  </div>


</template>

<style scoped lang="less">
@import url('@/style/variable');


.course_item {
  cursor: pointer;
  padding: 20px;
  //width: 400px;
  border: 1px solid #ccc;

}

.grid {
  //padding: 24px;
}

</style>